  layui.config({
     base: CXL.ctxPath + '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['laydate','table','index'], function(){
        var table = layui.table;
        var areaArr;

        //绘制库区图
        //库区实际长度
        let areaActualLength = 45000;
        //库区实际宽度
        let areaActualWidth = 26400;
        var canvasHeight = window.screen.height;
        //获取宽度
        var canvasWidth = document.getElementById('areaMap').clientWidth;

        let lengthScale = areaActualLength /canvasWidth;//长度比例
        let widthScale = areaActualWidth / canvasHeight; // 宽度比例

        let topLengthStart = 3000;//上半区默认起始实际长度
        let topWidthStart = 500;//上半区默认起始实际宽度

        //上库区总宽
        let topAreaActualWidth = 13200;
        //下库区总宽
        let bomttomAreaActualWidth = areaActualWidth - topAreaActualWidth;

        let bomttomLengthStart = 13500;//下半区默认起始实际长度
        let bomttomTopWidthStart = 0;//上半区默认起始实际宽度

         let app = new PIXI.Application({
               //backgroundColor:'#6633CC',
               height:canvasHeight,
               width:canvasWidth,
         });

         app.renderer.background.color = 0x264f7b;
         let leftTopImg = PIXI.Sprite.from(CXL.ctxPath + '/C24012/images/area/leftTop.jpg');
         let rightTopImg = PIXI.Sprite.from(CXL.ctxPath + '/C24012/images/area/rightTop.jpg');
         let leftBottomImg = PIXI.Sprite.from(CXL.ctxPath + '/C24012/images/area/leftBottom.jpg');
         let rightBottomImg = PIXI.Sprite.from(CXL.ctxPath + '/C24012/images/area/rightBottom.jpg');
         rightTopImg.position.set(canvasWidth - 242, 0);
         leftBottomImg.position.set(0, canvasHeight - 84);
         rightBottomImg.position.set(canvasWidth - 254, canvasHeight - 84);

         const backContainer = new PIXI.Container();
         backContainer.addChild(leftTopImg);
         backContainer.addChild(rightTopImg);
         backContainer.addChild(leftBottomImg);
         backContainer.addChild(rightBottomImg);
         app.stage.addChild(backContainer);

        //渲染基准数据
        let normalRenderData = {
            BlockCrane1X: 100,
            BlockCrane1Y: 50,
            BlockCrane2X: 150,
            BlockCrane2Y: 50,

            BlockTrolleyX: 100,
            BlockTrolleyY: 220,

            upBridgeX: 15,
            upBridgeY: 15,
            trackWidth:15,
        }



        document.getElementById("areaMap").appendChild(app.view);

        //画大车轨道
        const trackTop = new PIXI.Graphics();

        //设置线的样式，第一个参数是线宽，第二个参数是颜色
        trackTop.lineStyle(4, '#99FFFF');
        trackTop.beginFill('0x264f7b', 0.6);
        trackTop.drawRect(normalRenderData.upBridgeX,normalRenderData.upBridgeY,canvasWidth - normalRenderData.upBridgeX * 2 ,normalRenderData.trackWidth);
        app.stage.addChild(trackTop);


        const trackBottom = new PIXI.Graphics();

        //设置线的样式，第一个参数是线宽，第二个参数是颜色
        trackBottom.lineStyle(4, '#99FFFF');
        trackBottom.beginFill('0x264f7b', 0.6);
        trackBottom.drawRect(normalRenderData.upBridgeX,canvasHeight - 2*normalRenderData.upBridgeY,canvasWidth - normalRenderData.upBridgeX * 2 ,normalRenderData.trackWidth);
        app.stage.addChild(trackBottom);






        //文字格式
      let verticalStyle = new PIXI.TextStyle({
         fontSize:20,
         fill:"black",
         breakWords: true,
         wordWrapWidth: 1
         });

        //画上下半区分界线
        const boundaryLine = new PIXI.Graphics();

        //设置线的样式，第一个参数是线宽，第二个参数是颜色
        boundaryLine.lineStyle(10, 0xAAAAAA);
        //线从第一个点
        boundaryLine.moveTo(0, topAreaActualWidth / widthScale);
        //绘制第二个点
        boundaryLine.lineTo(areaActualLength / lengthScale, topAreaActualWidth / widthScale);
        //将绘制的线加入到舞台stage上
        app.stage.addChild(boundaryLine);


        //初始化库区名称
        initAreaText();
        //画两端示意区域
        drawEndEdgeRegion();

        //上料口辊道
        const rollerContainer = new PIXI.Container();
        const roller1 = PIXI.Sprite.from( CXL.ctxPath  +'/C24012/images/crane/roller.png');
        roller1.position.set(canvasWidth - 200, canvasHeight/2 - 65);
        rollerContainer.addChild(roller1);
        app.stage.addChild(rollerContainer);


        //小车与车本体
        const blockContainer = new PIXI.Container();
        const blockCrane1 = PIXI.Sprite.from( CXL.ctxPath  +'/C24012/images/crane/BlockCrane.png');
        const blockCrane2 = PIXI.Sprite.from( CXL.ctxPath  +'/C24012/images/crane/BlockCrane.png');
        //设置小车轨道的长度
        blockCrane1.height = canvasHeight - 30;
        blockCrane2.height = canvasHeight - 30;
        blockCrane1.position.set(50, 15);
        blockCrane2.position.set(100, 15);
        blockContainer.addChild(blockCrane1);
        blockContainer.addChild(blockCrane2);
        app.stage.addChild(blockContainer);

        const craneContainer = new PIXI.Container();
        const craneImg = PIXI.Sprite.from( CXL.ctxPath  +'/C24012/images/crane/Crane.png');
        craneImg.scale.set(0.5);
        craneImg.position.set(50, 30);
        craneContainer.addChild(craneImg);
        app.stage.addChild(craneContainer);

        var Page = {
          tableId: 'stackTableInfo',
          url:CXL.ctxPath + '/sys/area/queryAreaInfo',
          detailUrl:CXL.ctxPath + "/msgDetail/query/id",
          initColumn:function(){
              return [[
                    {type : 'numbers',title : '序号',width:'3%'},
                    {field:'id',title:'idKey',hide:true},
                    {field:'steelLength',width:'14%',title:'长度'},
                    {field : 'steelWidth',title : '宽度',width:'14%'},
                    {field:'steelThick',width:'12%',title:'厚度'},
                    {field:'areaName',width:'15%',title:'垛位名称'},
                    {field : 'layer',title : '所在层',width:'13%'},
                    {title:'操作',width:'20%',toolbar: '#data-tool'}
              ]];
          },
        };

        var steelInfo = {
          tableId: 'steelInfo',
          url:CXL.ctxPath + '/sys/area/queryAreaInfo',
          initColumn:function(){
              return [[
                    {type : 'numbers',title : '序号',width:'4%'},
                    {field:'id',title:'id',hide:true},
                    {field:'partNo',title:'partNo',hide:true},
                    {field:'componentNo',title:'componentNo',hide:true},
                    {field:'status',title:'status',hide:true},
                    {field:'inTime',title:'inTime',hide:true},
                    {field:'outTime',title:'outTime',hide:true},
                    {field:'steelLength',width:'13%',title:'长度'},
                    {field : 'steelWidth',title : '宽度',width:'13%'},
                    {field:'steelThick',width:'12%',title:'厚度'},
                    {field:'areaName',width:'15%',title:'垛位名称'},
                    {field : 'layer',title : '所在层',width:'13%'},
                    {title:'操作',width:'20%',toolbar: '#data-tool'}
              ]];
          },
        };



          $(document).ready(function(){

            if('WebSocket' in window){
            //本地调试  ws://localhost:8080/boot/webSocket
            //生产地址ws://192.168.12.237:8080/boot/webSocket
                ws = new WebSocket('ws://localhost:8080/webSocket/areaInfo');
            }


            ws.onmessage = function(event){
                var res = $.parseJSON(event.data);
                var code = res.code;
                //首次建立连接
                if(res.code == 1){
                    //调用成功
                    var list = res.data;
                    areaArr =  [];
                    for(var count=0;count<list.length;count++){
                        var item = list[count];
                        var num = count + 1;
                        const area = new PIXI.Graphics();
                        //设置线的样式，第一个参数是线宽，第二个参数是颜色
                        area.lineStyle(5, 0x000000);
                        let x ;
                        let y;
                        let areaGraphWidth;
                        let areaGraphLength;
                        var areaText = new PIXI.Text('垛位' + num, verticalStyle);
                        //画长方形垛位图形
                        if(item.areaIndex == 1){
                            x = (item.leftTopXIndex+topLengthStart) / lengthScale;
                            y = (item.leftTopYIndex + topWidthStart) / widthScale;
                            areaGraphWidth = item.areaWidth / widthScale;
                            areaGraphLength = item.areaLength / lengthScale;

                        } else {
                            x = (item.leftTopXIndex+bomttomLengthStart) / lengthScale;
                            y = (item.leftTopYIndex + topWidthStart + bomttomTopWidthStart) / widthScale;
                            areaGraphWidth = item.areaWidth / widthScale;
                            areaGraphLength = item.areaLength / lengthScale;

                        }
                        area.beginFill('#3399FF', 0.6);
                        areaText.anchor.set(0.5); // 文字居中展示
                        areaText.x = x + areaGraphLength / 2;
                        areaText.y = y + areaGraphWidth / 2 ;
                        app.stage.addChild(area);
                        app.stage.addChild(areaText);
                        area.drawRect(x,y,areaGraphLength,areaGraphWidth);
                        // 添加点击事件监听器
                        area.interactive = true;
                        area.on('pointerdown', onClick);
                        //声明一个对象
                        areaArr[count] = {'xMin':x,'yMin':y,'xMax':x + areaGraphLength,'yMax':y+areaGraphWidth,'id':item.id};
                        console.log(areaArr[count]);
                    }


               }

            }



          });




        //初始化库区名称
        function initAreaText(){

            //绘制库区字
           let areaTextStyle = new PIXI.TextStyle({
             fontSize:30,
             fill:"red",
             breakWords: true,
             wordWrapWidth: 1
           });
           var areaText1 = new PIXI.Text('7-1区', areaTextStyle);

           var areaText2 = new PIXI.Text('7-2区', areaTextStyle);
            areaText1.x = canvasWidth / 2;
            areaText1.y = 0 ;
            app.stage.addChild(areaText1);
            areaText2.x = canvasWidth / 2;
            areaText2.y = topAreaActualWidth / widthScale ;
            app.stage.addChild(areaText2);
        }


        function drawEndEdgeRegion(){
            let regionWidth = 150;
            let regionStartY = 100;
            let regionEndY = 700;
            //绘制库区字
           let regionTextStyle = new PIXI.TextStyle({
             fontSize:30,
             fill:"black",
             breakWords: true,
             wordWrap: true,
             wordWrapWidth: 1
           });
            // 创建一个 Graphics 对象
            let startRegion = new PIXI.Graphics();

            //设置线的样式，第一个参数是线宽，第二个参数是颜色
            startRegion.lineStyle(regionWidth, 0xAAAAAA);
            //线从第一个点
            startRegion.moveTo(0, regionStartY);
            //绘制第二个点
            startRegion.lineTo(0, regionEndY);
            app.stage.addChild(startRegion);


            var startRegionText = new PIXI.Text('下料口', regionTextStyle);
            startRegionText.x = regionWidth / 4;
            startRegionText.y = (regionEndY  - regionStartY) / 2 + regionStartY;
            startRegionText.anchor.set(0.5); // 文字居中展示
            app.stage.addChild(startRegionText);



        }

        // 点击事件处理函数
       function onClick(event) {

             for(var count=0;count<areaArr.length;count++){
                var item = areaArr[count];
                //判断点击位置在哪个库区中，返回对应后端数据库区的id值
                if(item.xMin <= event.clientX && item.xMax >= event.clientX && item.yMin <= event.clientY && item.yMax >= event.clientY){
                     var dataInfo = document.getElementById('dataInfo');
                     var steelInfo = document.getElementById('steelInfo');


                     // 移除类来显示元素
                     dataInfo.classList.remove('hidden');
                     steelInfo.classList.remove('hidden');
                     $("#steelInfo .layui-input").val('');
                     //获取当前垛位的所有钢件信息
                      table.render({
                         elem:'#' + Page.tableId,
                         url:Page.url,
                         height:'250px',
                         page:false,
                         autoSort:false,
                         where: {'areaId':item.id},
                         cols:Page.initColumn()
                     });
                     break;
                }

             }
        }

        table.on('tool(' + Page.tableId + ')',function(obj){
            //获取当前行的数据
            var data = obj.data;


            //获取lay-event对应的值（也可以是表头的event参数对应的值）
            var layEvent = obj.event;

            if(layEvent == 'detail'){
                Page.detail(data);

            }

        });

        Page.detail = function(data){
             $('#steelLength').val(data.steelLength);
             $('#steelWidth').val(data.steelWidth);
             $('#steelThick').val(data.steelThick);
             $('#layer').val(data.layer);
             $('#areaName').val(data.areaName);
             $('#componentNo').val(data.componentNo);
             $('#partNo').val(data.partNo);
             $('#outTime').val(data.outTime);
             $('#inTime').val(data.inTime);


        }

















  });


